<template>
  <div class="box">
    <div class="box-top">
      城市选择
      <span class="sp" @click="city">&lt;</span>
    </div>
    <div class="dangqian">当前定位城市</div>
    <div class="dinwei">
      <div class="din-left">
        <span class="iconfont icon-zuobiao1"></span>
        定位失败
      </div>
      <div class="din-right">重新定位</div>
    </div>
    <div class="yinru">
      <van-index-bar>
        <van-index-anchor index="A" />
        <van-cell title="安庆" @click="show(0)"/>
        <van-cell title="鞍山" @click="show(1)"/>
        <van-cell title="安阳" @click="show(2)"/>

        <van-index-anchor index="B" />
        <van-cell title="蚌埠" @click="show(3)"/>
        <van-cell title="保定" @click="show(4)"/>
        <van-cell title="宝鸡" @click="show(5)"/>
        <van-cell title="巴中" @click="show(6)"/>
        <van-cell title="北京" @click="show(7)"/>

        <van-index-anchor index="C" />
        <van-cell title="苍州" @click="show(8)"/>
        <van-cell title="长春" @click="show(9)"/>
        <van-cell title="常德" @click="show(10)"/>
        <van-cell title="长沙" @click="show(11)"/>
        <van-cell title="常州" @click="show(12)"/>

        <van-index-anchor index="D" />
        <van-cell title="大理" @click="show(13)"/>
        <van-cell title="大连" @click="show(14)"/>
        <van-cell title="大庆" @click="show(15)"/>
        <van-cell title="德阳" @click="show(16)"/>
        <van-cell title="德州" @click="show(17)"/>

        <van-index-anchor index="E" />
        <van-cell title="蚌埠" @click="show(18)"/>
        <van-cell title="保定" @click="show(19)"/>
        <van-cell title="宝鸡" @click="show(20)"/>
        <van-cell title="巴中" @click="show(21)"/>
        <van-cell title="北京" @click="show(22)"/>

        <van-index-anchor index="F" />
        <van-cell title="佛山" @click="show(23)"/>
        <van-cell title="抚顺" @click="show(24)"/>
        <van-cell title="阜阳" @click="show(25)"/>
        <van-cell title="抚州" @click="show(26)"/>
        <van-cell title="福州" @click="show(27)"/>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
export default {
  name: "City",
  data(){
    return {
      chenshi:["安庆","鞍山","安阳","蚌埠","保定","宝鸡","巴中","北京","苍州","长春","常德","长沙","常州",
      "大理","大连","大庆","德阳","德州","蚌埠","保定","宝鸡","巴中","北京","佛山","抚顺","阜阳","抚州","福州",]
    }
  },
  methods: {
    city() {
      this.$router.back();
    },
    show(index){
      this.$store.state.dizhi = this.chenshi[index],
      this.$router.push("/Waisong")
    }
  },
};
</script>

<style scoped>
@import url("../assets/font-footer/iconfont.css");
.box .box-top {
  width: 3.5rem;
  height: 0.44rem;
  position: relative;
  text-align: center;
  line-height: 0.44rem;
  font-size: 0.18rem;
}
.box-top .sp {
  font-size: 0.2rem;
  position: absolute;
  top: 0;
  left: 0.14rem;
}
.box .dangqian {
  width: 3.6rem;
  height: 0.36rem;
  text-indent: 0.16rem;
  line-height: 0.36rem;
  color: #909090;
  font-size: 0.13rem;
}
.box .dinwei {
  width: 3.4rem;
  height: 0.44rem;
  margin: auto;
  background-color: #fff;
  border-radius: 0.04rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.12rem;
}
.dinwei .din-left {
  margin-left: 0.12rem;
}
.din-left .icon-zuobiao1 {
  font-size: 0.12rem;
}
.dinwei .din-right {
  color: #6a84c2;
  margin-right: 0.2rem;
}
</style>